<template>
  <div style="width: 100%; margin: auto;">
    <div class="px-8">
      <h2 class="head-title text-xl font-bold">
        申报业务
      </h2>

      <el-tabs v-model="bussinessActiveIndex">
        <el-tab-pane label="申报中" name="0">
          <table class="self-table-form rounded-md" style="min-height: auto;">
            <thead>
              <tr>
                <th class="label">计划类别</th>
                <th class="label">项目类别</th>
                <th class="label">申报起止时间</th>
                <th class="label">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in canDeclareList" :key="index">
                <td v-if="index == 0" :rowspan="canDeclareList.length" class="label">
                  江西独角兽瞪羚申报
                </td>
                <td class="label">
                  {{ item.dictLabel }}
                </td>
                <td class="label">
                  <div>
                    {{ item.startTime + "-" + item.endTime }}
                    <div :class="[
                      'text-sm',
                      !declareTimeText(item.endTime) ? 'text-red-500' : ''
                    ]">
                      {{ !declareTimeText(item.endTime) ? "已过期" : "" }}
                    </div>
                  </div>
                  <div :class="['text-sm']"></div>
                </td>
                <td :class="[
                  'font-bold text-center cursor-pointer',
                  declareStatusObj(item.endTime)['color']
                ]">
                  <span @click="toDeclareDetail(item)">
                    {{ declareStatusObj(item.endTime)["text"] }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="所有" name="1">
          <table class="self-table-form rounded-md">
            <thead>
              <tr>
                <th class="label">计划类别</th>
                <th class="label">项目类别</th>
                <th class="label">申报起止时间</th>
                <th class="label">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in declareTypeList" :key="index">
                <td v-if="index == 0" :rowspan="declareTypeList.length" class="label">
                  江西独角兽瞪羚申报
                </td>
                <td class="label">
                  {{ item.dictLabel }}
                </td>
                <td class="label">
                  <div>
                    {{ item.startTime + "-" + item.endTime }}
                  </div>
                  <div :class="[
                    'text-sm',
                    !declareTimeText(item.endTime) ? 'text-red-500' : ''
                  ]">
                    {{ !declareTimeText(item.endTime) ? "已过期" : "" }}
                  </div>
                </td>
                <td :class="[
                  'font-bold text-center cursor-pointer',
                  declareStatusObj(item.endTime)['color']
                ]">
                  <span @click="toDeclareDetail(item)">
                    {{ declareStatusObj(item.endTime)["text"] }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { addDeclare } from "@/api/declareList";

export default {
  name: "declareList",
  computed: {
    declareStatusObj (endTime) {
      return endTime => {
        let isCanDeclare = this.isOverNow(endTime);
        if (isCanDeclare) {
          return { text: "进行申报", color: "text-blue-500" };
        } else {
          return { text: "", color: "" };
        }
      };
    },
    declareTimeText () {
      return endTime => {
        return this.isOverNow(endTime);
      };
    }
  },
  data () {
    return {
      bussinessActiveIndex: "0",
      canDeclareList: [],
      declareTypeList: [
        {
          id: 0,
          dictLabel: "2021江西省瞪羚企业认定申报",
          dictValue: "0",
          startTime: "2020.12.31",
          endTime: "2021.12.31"
        },
        {
          id: 1,
          dictLabel: "2021江西省潜在瞪羚企业认定申报",
          dictValue: "1",
          startTime: "2020.12.31",
          endTime: "2020.12.31"
        },

        {
          id: 2,
          dictLabel: "2021江西省独角兽企业认定申报",
          dictValue: "2",
          startTime: "2020.12.31",
          endTime: "2021.12.31"
        },
        {
          id: 3,
          dictLabel: "2021江西省潜在独角兽企业认定申报",
          dictValue: "3",
          startTime: "2020.12.31",
          endTime: "2021.12.31"
        },
        {
          id: 4,

          dictLabel: "2021江西省种子独角兽企业认定申报",
          dictValue: "4",
          startTime: "2020.12.31",
          endTime: "2021.12.31"
        }
      ]
    };
  },
  created () {
    this.initDeclareList();
  },
  methods: {
    // 初始化申报列表  所有的申报列表
    initDeclareList () {
      // getDeclareList().then(res => {
      //   if (res.code == 200) {
      //     if (res.rows) {
      //       this.declareList = this.addDeclareDetail(res.rows);
      //     }
      //   }
      // });
      this.declareList = this.addDeclareDetail(this.declareTypeList);
    },
    findDeclareRealItem (type) {
      if (this.declareTypeList) {
        let resItem = {};

        this.declareTypeList.forEach(item => {
          if (type == parseInt(item.dictValue)) {
            resItem = item;
          }
        });

        return resItem;
      } else {
        return "";
      }
    },
    addDeclareDetail (declareList) {
      let hasDetailList = [];
      declareList.forEach((item, index) => {
        // Object.assign(item,that.findDeclareRealItem(item.type))
        hasDetailList[index] = {
          ...item,
          ...this.findDeclareRealItem(item.type)
        };

        this.addCanDeclareList(hasDetailList[index]);
      });
      return hasDetailList;
    },
    addCanDeclareList (item) {
      let isCanDeclare = this.isOverNow(item.endTime);
      if (isCanDeclare) {
        this.canDeclareList.push(item);
      }
    },
    // 传入时间，检测时间是否超过今天
    isOverNow (time) {
      let endTime = JSON.parse(JSON.stringify(time));
      if (endTime) {
        let lineDateStr = endTime.replace(/\./g, "/");
        let date = new Date(lineDateStr);
        let nowTime = new Date();
        let nowTimeChuo = nowTime.valueOf();
        let endTimeChuo = date.valueOf();
        if (nowTimeChuo >= endTimeChuo) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },
    adddeclareContent (typeId) {
      let requestObj = {
        year: 2021,
        type: typeId,
        status: 0
      };
      addDeclare(requestObj).then(res => {
        if (res.code == 200) {
          console.log("新增申报成功");
        }
      });
    },
    toDeclareDetail (item) {
      let typeId = item.id;
      if (getToken()) {
        let requestObj = {
          year: 2021,
          type: typeId,
          status: 0,
          declareTime: item.startTime + "-" + item.endTime
        };
        addDeclare(requestObj).then(res => {
          if (res.code == 200) {
            let relationId = parseInt(res.data.keyId);
            this.$router.push({
              path: "/enterprise/form",
              query: { id: relationId, typeId: typeId, declareIndex: 0 }
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "您还未登录!"
        });
        this.LogOut();
        // this.token = false;
      }
    }
  }
};
</script>

<style>
</style>
